
<template>
  <div>
    <MyHead title="搜索面试题"></MyHead>
    <div class="bar">
      <van-sticky>
        <van-search
          v-model="keyword"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
        />
      </van-sticky>
    </div>
    <div class="hlist" v-if="flag">
      <van-cell-group inset title="搜索历史">
        <van-cell
          @click="todoSearch(item.title)"
          v-for="(item, index) in searchHistory.slice(0, 10)"
          :title="'No.' + (index + 1)"
          icon="label-o"
          :value="item.title"
          :key="index"
          is-link
        />
      </van-cell-group>
    </div>
    <div class="slist" v-else>
      <MList :list="list"></MList>
    </div>
  </div>
</template>

<script>
import { todogetallinters } from "@/api/api";
export default {
  data() {
    return {
      keyword: "",
      list: [],
      flag: true,
      searchHistory: [],
    };
  },
  methods: {
    async todoSearch(keyword) {
      let res = await todogetallinters({
        keyword,
      });
      if (res.code == 200) {
        this.flag = false;
        this.list = res.result;
        this.keyword = keyword;
      }
    },
    async onSearch(keyword) {
      // 开始搜索
      console.log(keyword);
      let res = await todogetallinters({
        keyword,
      });
      if (res.code == 200) {
        this.flag = this.flag;
        this.list = res.result;
        this.searchHistory.unshift({ title: keyword });
        localStorage.setItem(
          "searchHistory",
          JSON.stringify(this.searchHistory)
        );
      }
    },
    onCancel() {
      // 取消搜索
      this.flag = true;
      this.keyword = "";
    },
  },
  mounted() {
    this.searchHistory =
      JSON.parse(localStorage.getItem("searchHistory")) || [];
  },
};
</script>